<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Payment</title>
    <link rel="stylesheet" href="./common.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@latest"></script>
</head>

<body>
    <div class="pd20">
        <div class="top flex_x start ">
            <a href="./addcard.html"><img src="./static/image/left.png" alt=""></a>
            <span style="margin-left: 10vw;">Payment </span>
        </div>
        <div class="title">
            Debit/Credit <br>
            Card
        </div>
        <div class="t1" style="margin-top: 66px;">Card Number</div>
        <div class="area"></div>
        <div class="list flex_x start mt_20">
            <div class="left">
                <div class="t1">Expiry date</div>
                <div class="s1 flex_x around">
                    <div class="line"></div>
                </div>
            </div>
            <div class="right">
                <div class="t1">CVV</div>
                <div class="s2"></div>
            </div>
        </div>
        <div class="t1 mt_20">Name</div>
        <div class="area"></div>
        <div class="btn_list flex_x between">
            <a href="./addcard.html">
                <div class="btn btn1">Cancel payment</div>
            </a>
            <a href="./payment2.html"><div class="btn btn2">Next</div></a>

        </div>
    </div>

</body>
<style>
    body {
        background-color: #fff;
    }

    .top img {
        width: 8px;
        height: 11px;
        margin-right: 115px;
    }

    .pd20 {
        padding: 20px;
        box-sizing: border-box;
    }

    .top {
        font-size: 15px;
        align-items: center;
    }

    .title {
        font-size: 28px;
        font-style: normal;
        font-weight: 700;
        margin-top: 53px;
    }

    .t1 {
        font-size: 15px;
        font-style: normal;
        font-weight: 600;
    }

    .area {
        width: 342px;
        margin: 0 auto;
        height: 42px;
        border-radius: var(--spacing-2, 8px);
        background: rgba(228, 227, 227, 0.50);
        margin-top: 10px;
    }

    .list {
        text-align: left;
    }

    .s1 {
        width: 139px;
        height: 42px;
        border-radius: var(--spacing-2, 8px);
        background: rgba(228, 227, 227, 0.50);
        margin-top: 6px;
        padding: 6px;
        box-sizing: border-box;
    }

    .line {
        width: 1px;
        height: 100%;
        background-color: rgba(153, 153, 153, 0.50);
    }

    .right {
        margin-left: 88px;

    }

    .s2 {
        width: 66px;
        height: 42px;
        border-radius: var(--spacing-2, 8px);
        background: rgba(228, 227, 227, 0.50);
        margin-top: 6px;
        padding: 6px;
        box-sizing: border-box;
    }

    .btn_list {
        margin-top: 49px;
    }

    .btn {
        width: 146px;
        height: 42px;
        line-height: 42px;
        border-radius: 13px;
        font-size: 12px;
        font-weight: 600;
        text-align: center;
    }

    .btn1 {
        color: #FF8906;
        background: #F7E9D9;
    }
    .btn2{
        background: #FDA84A;
    }
</style>

</html>